<template>
    <van-nav-bar title="学科分析" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- 成绩列表 -->
    <h2>成绩</h2>
    <table cellspacing="0">
        <tr>
            <td>科目</td>
            <td>分数</td>
        </tr>
        <tr v-for="item in list">
            <td>{{ item.name }}</td>
            <td>{{ item.score }}</td>
        </tr>
    </table>
    <h2>分析</h2>
    <div id="main"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import type { Ref } from 'vue'
import { getStudent } from '@/api/student'
import * as echarts from 'echarts';

const onClickLeft = () => history.back();

interface IStudent {
    name: string,
    id: number,
    class: string,
    account: string,
    password: string,
    phone: string,
    grade: object
}

const list: Ref<IStudent[]> = ref([])

const scoreData: Ref<IStudent[]> = ref([])

onMounted(async () => {
    const { data } = await getStudent()
    list.value = data[0].grade
    
    list.value.forEach(item => {
        scoreData.value.push(item.score)
    })

    nextTick(() => {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '学科薄弱分析',
                left: 'center'
            },
            legend: {
                bottom: 10,
                left: 'center',
                data: ['实际成绩']
            },
            radar: {
                // shape: 'circle',
                indicator: [
                    { name: '语文', max: 100 },
                    { name: '数学', max: 100 },
                    { name: '英语', max: 100 },
                    { name: '物理', max: 100 },
                    { name: '化学', max: 100 },
                    { name: '生物', max: 100 },
                    { name: '政治', max: 100 },
                    { name: '历史', max: 100 },
                    { name: '地理', max: 100 },
                ]
            },
            series: [
                {
                    name: 'Budget vs spending',
                    type: 'radar',
                    data: [
                        {
                            value: scoreData.value,
                            name: '实际成绩'
                        }
                    ]
                }
            ]
        };

        option && myChart.setOption(option);

    })

})
</script>

<style scoped lang="scss">
h2 {
    height: 30px;
    padding-left: 10px;
    background-color: #74ede4;
    line-height: 30px;
}

table {
    width: 300px;
    height: 500px;
    margin: 5px auto 0;
    text-align: center;

    tr,
    td {
        border: 1px solid black;
    }
}

#main {
    height: 400px;
}
</style>